<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS尺寸属性(Dimension)</title>
<style type="text/css">
html,body{
	height:100%;
}
div{
	padding:10px;
	margin:10px;
	border:10px #00FF00 dotted;
	overflow:auto;
}
.a1{
	width:90%;
	height:auto;
}
.a2{
	width:90%;
	height:100px;
}
.a3{
	width:90%;
	height:30%;
}
.a4{
	width:90%;
	height:inherit;
}
.b1{
	max-height:none;
}
.b2{
	max-height:100px;
}
.b3{
	max-height:10%;
}
.b4{
	max-height:inherit;
}
.all{
	display:inline-block;
	width:auto;
	height:auto;
	max-width:50%;
	min-width:20%;
	max-height:200px;
	min-height:100px;
}
</style>
</head>
<body>
<div>height</div>
<div class="a1">
	<p>auto,自动高度,默认。</p>
	<p>01</p>
	<p>02</p>
	<p>03</p>
	<p>04</p>
	<p>05</p>
	<p>06</p>
	<p>07</p>
	<p>08</p>
	<p>09</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	<p>15</p>
</div>
<div class="a2">
	<p>以单位值定义height属性。</p>
	<p>01</p>
	<p>02</p>
	<p>03</p>
	<p>04</p>
	<p>05</p>
	<p>06</p>
	<p>07</p>
	<p>08</p>
	<p>09</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	<p>15</p>
</div>
<div class="a3">
	<p>body子元素使用百分比height时,使用html,body{height:100%;}来解决,否则会无效。</p>
</div>
<div class="a4">
	<p>任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。所以应避免使用。</p>
</div>
<div>max-height</div>
<div class="b1">
	<p>none,定义对元素被允许的最大高度没有限制,默认。</p>
	<p>01</p>
	<p>02</p>
	<p>03</p>
	<p>04</p>
	<p>05</p>
	<p>06</p>
	<p>07</p>
	<p>08</p>
	<p>09</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	<p>15</p>
</div>
<div class="b2">
	<p>以单位值定义max-height属性。</p>
	<p>01</p>
	<p>02</p>
	<p>03</p>
	<p>04</p>
	<p>05</p>
	<p>06</p>
	<p>07</p>
	<p>08</p>
	<p>09</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	<p>15</p>
</div>
<div class="b3">
	<p>body子元素使用百分比max-height时,使用html,body{height:100%;}来解决,否则会无效。</p>
</div>
<div class="b4">
	<p>任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。所以应避免使用。</p>
</div>
<div>综合例子</div>
<div class="all">
<p>保证最小长、宽,</p>
</div>
<div class="all">
<span style="display:inline-block;width:1000px; background-color:#F00">突破宽</span>
</div>
<div class="all">
<span style="display:inline-block;height:1000px; background-color:#F00">突破高</span>
</div>
<div class="all">
<span style="display:inline-block; width:1000px; height:1000px; background-color:#F00">全突破</span>
</div>
</body>
</html>